@<template>
  <div id='navbar'>
      <div class='left_bar'><slot name='left_bar'></slot></div>
      <div class='mid_bar'><slot name='mid_bar'></slot></div>
      <div class='right_bar'><slot name='right_bar'></slot></div>
  </div>
</template>

<script>
export default {
    components: {

    },
    

}
</script>

<style>
#navbar {
    display: flex;
    width: 100%;
  
    /* line-height: 44px; */
    /* background-color: pink; */
    text-align: center;
    /* box-shadow: 0 0 5px rgba(0,0,0,.1); */
}
/* .left_bar,
.right_bar {
    width: 60px;

} */
.mid_bar {
    flex: 1;
    /* color: #fff; */
    
}
</style>